<template>
  <view @touchmove.stop.prevent>
    <view
      class="tui-reply-tabbar"
      :style="{ paddingBottom: `${keyboardHeight}px` }"
    >
      <view class="tui-chat-tabbar">
        <!-- <view class="tui-icon tui-icon-im_keyboard  tui-icon-mr" @tap="showKeyBoard(1)"></view> -->
        <view class="input-icon" v-if="showMenu" @click="clickMenu">
          <view class="iconfont icon-gonggonghao-xianshicaidan_zqwdhl" />
        </view>
        <view
          class="iconfont icon-icon_im_voice tui-icon-mr"
          v-if="!isVoice"
          @tap="switchVoice"
        ></view>
        <view
          class="iconfont icon-icon_im_keyboard tui-icon-mr"
          v-if="isVoice"
          @tap="switchInput"
        ></view>

        <input
          hold-keyboard
          class="tui-chat-input"
          @input="inputReply"
          confirm-type="发送"
          :adjust-position="false"
          maxlength="300"
          :value="content"
          @tap.stop="showKeyBoard(1)"
          v-show="!isVoice"
        />
        <view
          class="tui-chat-voice_btn"
          hover-class="hover"
          :hover-stay-time="150"
          v-if="isVoice"
          >按住 说话
        </view>

        <view
          class="tui-send-box"
          :style="{ width: content ? '110px' : '80px' }"
        >
          <view
            class="iconfont icon-icon_im_face"
            @tap="showKeyBoard(2)"
          ></view>
          <view
            class="iconfont icon-icon_im_more tui-icon-ml"
            @tap="showKeyBoard(3)"
            v-if="!content"
          ></view>
          <tui-button
            height="32px"
            width="60px"
            :size="14"
            v-if="content"
            @tap="hideKeyboard"
            class="send"
            >{{ sendText }}</tui-button
          >
        </view>
      </view>
      <view class="tui-reply-more">
        <view class="tui-face-box" v-show="showIndex == 2">
          <scroll-view
            scroll-y
            :style="{ height: replyContainerH + 50 + 'px' }"
          >
            <view class="tui-face-scroll">
              <view
                class="tui-face-img_box"
                v-for="(item, index) in faceList"
                :key="index"
                @tap="inputFace(index)"
              >
                <image
                  :src="`https://www.thorui.cn/wx/static/images/im_face/${item}.png`"
                  class="tui-face-img"
                ></image>
              </view>
            </view>
          </scroll-view>
          <view class="tui-delete-face_box">
            <view class="tui-delete-keybord"
              ><text
                class="iconfont icon-delete-keyboard"
                :class="{ 'delete-disable': !content }"
              ></text
            ></view>
          </view>
        </view>
        <view
          class="tui-more-box"
          :style="{ height: replyContainerH + 'px' }"
          v-show="showIndex == 3"
        >
          <view class="tui-more-item">
            <view class="tui-more-icon" @click="choosePic">
              <view class="iconfont icon-image-fill"></view>
            </view>
            <text class="tui-more-text">照片</text>
          </view>
          <view class="tui-more-item">
            <view class="tui-more-icon" @click="chooseVideo">
              <view class="iconfont icon-camera-fill"></view>
            </view>
            <text class="tui-more-text">拍摄</text>
          </view>
          <view class="tui-more-item">
            <view class="tui-more-icon">
              <view class="iconfont icon-video-fill"></view>
            </view>
            <text class="tui-more-text">视频通话</text>
          </view>
          <view class="tui-more-item">
            <view class="tui-more-icon" @click="chooseLocation">
              <view class="iconfont icon-location-fill"></view>
            </view>
            <text class="tui-more-text">位置</text>
          </view>
          <view class="tui-more-item">
            <view class="tui-more-icon">
              <view class="iconfont icon-redenvelope-fill"></view>
            </view>
            <text class="tui-more-text">红包</text>
          </view>
          <view class="tui-more-item">
            <view class="tui-more-icon" @click="chooseFile">
              <view class="iconfont icon-folder-add-fill"></view>
            </view>
            <text class="tui-more-text">文件</text>
          </view>
        </view>
      </view>
      <view class="tui-inner-mask" v-if="isLocked"></view>
      <view class="safe-bottom" v-show="keyboardHeight == 0"></view>
    </view>
    <view
      class="tui-reply-mask"
      v-if="mask"
      :class="{
        'tui-box-show': showIndex,
        'tui-mask-show': showIndex && !maskOpacity,
      }"
      @touchmove.stop.prevent
      @tap="hideKeyboard"
    ></view>
  </view>
</template>

<script>
//聊天栏 回复栏
import emoji from "@/common/js/emoji.js";
export default {
  name: "xbootChatBar",
  props: {
    //禁用聊天栏
    isLocked: {
      type: Boolean,
      default: false,
    },
    //是否显示遮罩
    mask: {
      type: Boolean,
      default: true,
    },
    //true表示遮罩透明
    maskOpacity: {
      type: Boolean,
      default: true,
    },
    sendText: {
      type: String,
      default: "发送",
    },
    color: {
      type: String,
      default: "#5677fc",
    },
    showMenu: {
      type: Boolean,
      default: false,
    },
  },
  created() {
    // 表情加载
    this.faceList = emoji.en;
    // 键盘高度监听
    uni.onKeyboardHeightChange((res) => {
      let h = res.height;
      this.keyboardHeight = h > 0 ? h : 0;
    });
  },
  data() {
    return {
      showIndex: 0, //1-键盘 2-表情 3-其他
      keyboardHeight: 0,
      replyContainerH: 250,
      faceList: [],
      content: "",
      isVoice: false,
    };
  },
  methods: {
    clickMenu() {
      this.$emit("clickMenu", true);
    },
    hideKeyboard() {
      // 隐藏键盘
      this.showIndex = 0;
      // uni.hideKeyboard();
    },
    showKeyBoard(index) {
      if (this.showIndex == index) {
        this.showIndex = 0;
        return;
      }
      this.showIndex = index;
      this.isVoice = false;
    },
    inputReply(e) {
      this.content = e.detail.value;
    },
    inputFace(index) {
      let face = emoji.cn[index];
      this.content = this.content + face;
    },
    switchVoice() {
      this.isVoice = true;
      this.showIndex = 0;
    },
    switchInput() {
      this.isVoice = false;
    },
    choosePic() {
      uni.chooseImage({
        count: 9, //默认9
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album"], //从相册选择
        success: (res) => {
          console.log(JSON.stringify(res.tempFilePaths));
        },
      });
    },
    chooseVideo() {
      uni.chooseVideo({
        sourceType: ["camera"],
        success: (res) => {
          console.log(JSON.stringify(res.tempFilePath));
        },
      });
    },
    chooseLocation() {
      uni.chooseLocation({
        success: function (res) {
          console.log("位置名称：" + res.name);
          console.log("详细地址：" + res.address);
          console.log("纬度：" + res.latitude);
          console.log("经度：" + res.longitude);
        },
      });
    },
    chooseFile() {
      uni.chooseFile({
        success: (res) => {
          console.log(res);
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.safe-bottom {
  height: env(safe-area-inset-bottom);
  background: #f6f6f6;
}

.tui-reply-tabbar {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  z-index: 999;

  .iconfont {
    color: #191919;
    font-size: 26px;
  }

  .tui-chat-tabbar {
    width: 100%;
    background-color: #f6f6f6;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    box-sizing: border-box;

    &::after {
      content: " ";
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      border-top: 1px solid #e4e4e4;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }

    .input-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 23px;
      height: 23px;
      position: relative;
      margin-right: 10px;
      .iconfont {
        font-size: 23px;
        color: #191919;
      }
    }

    .tui-chat-input {
      flex: 1;
      /* #ifndef MP-WEIXIN */
      height: 23px;
      padding: $xboot-spacing-col-base 0;
      /* #endif */
      /* #ifdef MP-WEIXIN */
      height: 20px;
      /* #endif */
      background-color: $xboot-bg-color;
      border-radius: 5px;
      margin: 0;
      padding: 8px;
    }

    .tui-chat-voice_btn {
      flex: 1;
      height: 39px;
      border-radius: 4px;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
    }

    .tui-icon-mr {
      margin-right: 14px;
    }

    .tui-icon-ml {
      margin-left: 14px;
    }

    .tui-send-box {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      transition: width 0.2s linear;
    }

    .send {
      margin: 0 0 0 10px !important;
    }
  }

  .tui-reply-more {
    width: 100%;
    position: relative;

    .tui-face-box {
      width: 100%;
      position: relative;
      background-color: #ededed;

      &::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        border-top: 1px solid #d1d1d1;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
      }

      .tui-face-scroll {
        width: 100%;
        padding: $xboot-spacing-row-lg 12px 40px;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;

        .tui-face-img_box {
          width: 14.2857%;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;

          .tui-face-img {
            width: 30px;
            height: 30px;
          }
        }
      }
      .tui-delete-face_box {
        position: absolute;
        width: 54px;
        height: 46px;
        right: 10px;
        bottom: 0;
        z-index: 10;

        .tui-delete-keybord {
          width: 54px;
          height: 34px;
          background: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: $xboot-border-radius-lg;

          .tui-icon {
            font-size: 24px;
          }

          &:active {
            background: #dddddd;
          }

          .delete-disable {
            opacity: 0.2;
          }
        }
      }
    }

    .tui-more-box {
      width: 100%;
      padding: $xboot-spacing-row-lg;
      box-sizing: border-box;
      position: relative;
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
      background-color: #f6f6f6;

      &::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        border-top: 1px solid #d1d1d1;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
      }

      .tui-more-item {
        width: 25%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
      }

      .tui-more-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        height: 63px;
        width: 63px;
        border-radius: 16px;

        .iconfont {
          color: #4c4c4c;
          font-size: 30px;
        }

        &:active {
          background: #dddddd;
        }
      }

      .tui-more-text {
        font-size: 12px;
        line-height: 12px;
        color: #7e7e7e;
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }
  }

  .tui-inner-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(248, 248, 248, 0.6);
  }
}

.tui-reply-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 990;
  background-color: $xboot-bg-color-mask;
  visibility: hidden;
  transition: all 0.3s ease;
  opacity: 0;
}

.tui-box-show {
  visibility: visible !important;
}

.tui-mask-show {
  opacity: 1;
}
</style>
